<script setup>
import {computed, inject, onMounted, ref} from "vue";
import {doDelete, doGet} from "../../util/request.js";
import {confirmMessage, showMessage} from "../../util/message.js";
import {useRouter} from "vue-router";





//用户对象集合
let UserList  = ref([])
//创建分页对象
let pageInfo = ref({})
//获取父组件的传递的方法
const flushPage = inject('flushPage')
//定义路由对象
const router= useRouter()

//加载用户列表
const loadData = (current) =>{
    //分页参数
  let params  =  {
    current:current,
  }
    doGet('/api/user/page',params).then(resp => {
        if (resp.data.code === 200){
          UserList.value = resp.data.data.list
          pageInfo.value = resp.data.data.total
        }else {
          showMessage("数据加载失败，请稍后重试"+resp.data.msg,"error")
        }
    })

}
//用户详情
const UserDetails = (id) => {
    router.push('/index/user/details/'+id)
}
//修改用户
const userEdit = (id) => {
  router.push('/index/user/edit/'+id)
}
let idArray = []
//获取checkbox选中的数据
const selectionChange = (newSelection) => {
  idArray = []
  newSelection.forEach((item)=>{
    idArray.push(item.id)
  })
  console.log(idArray)
}

//批量删除
const BatchDelete = () =>{
  // 判断是否选中了数据
  if(idArray.length === 0){
    showMessage("请选择要删除的数据","warning")
    return
  }
  confirmMessage("确定要删除吗？").then(()=>{
    doDelete('/api/user/batch/'+idArray).then((resp)=>{
      if (resp.data.code === 200){
        showMessage("删除成功","success")
        //loadData(1)
        flushPage()
      }else
        showMessage("删除失败"+resp.data.msg,"error")
    })
  })

}
//删除用户
const toDelete = (id)=>{
  confirmMessage("确定要删除吗？").then(()=>{
    doDelete('/api/user/'+id,{}).then((resp)=>{
        if (resp.data.code === 200){
          showMessage("删除成功","success")
         //loadData(1)
        flushPage()
        }else
          showMessage("删除失败"+resp.data.msg,"error")
    })
  })
}

// 页面加载完成后执行
onMounted(()=>{
  // 加载用户列表
  loadData(1)
})

</script>

<template>
<!-- 按钮 -->
  <div class="butt-ss">
  <el-button type="primary" round @click="router.push('/index/user/add')">新增用户</el-button>
  <el-button type="danger" round @click="BatchDelete">批量删除</el-button>
  </div>


<!--表格-->
  <div class="table-ss">
  <el-table
      :data="UserList"
      row-key="id"
      style="width: 100%"
      @selection-change="selectionChange"
  >
    <el-table-column type="selection" :selectable="selectable" width="55" />

    <el-table-column type="index"  label="序号" width="55" />
    <el-table-column property="loginAct" label="账号" width="120" />
    <el-table-column property="name" label="姓名" width="120" />
    <el-table-column property="phone" label="手机" width="120" />
    <el-table-column property="email" label="邮箱" width="200" />
    <el-table-column property="createTime" label="创建时间" width="120" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" size="small" @click="UserDetails(scope.row.id)">
          详情
        </el-button>
        <el-button type="success" size="small" @click="userEdit(scope.row.id)">
          编辑
        </el-button>
        <el-button size="small" type="danger" @click="toDelete(scope.row.id)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>

<!-- 分页 -->
  <div class="fy-ss">
  <el-pagination background layout="prev, pager, next" :total=pageInfo @change="loadData"/>
  </div>

</template>

<style scoped>
.butt-ss{
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 150px;
}
.table-ss{
  text-align: center;
  margin-left: 150px;
}
.fy-ss{
  margin-top: 10px;
  margin-left: 500px;;
}
</style>